<template>
  <div id="HourRoomSetting">
    <div class="content">
      <div class="overflow-auto">
        <div class="table">
          <div class="table_body">
            <div class="top_btn">
              <el-button type="primary" size="small" @click="addHour_room">新增钟点房</el-button>
            </div>

            <!-- 表格 -->
            <el-table :data="tableData" :header-cell-style="{ background: '#f7f8fb', color: '#303133' }"
              style="width: 100%;" :row-class-name="tableRowClassName">
              <el-table-column prop="pms_title" label="房型名称">
              </el-table-column>
              <el-table-column prop="hour" label="入住时长">
              </el-table-column>
              <el-table-column prop="price" label="价格">
              </el-table-column>
              <el-table-column label="操作">
                <template slot-scope="scope">
                  <el-button type="text" @click="openDialog(scope.row)">编辑</el-button>
                  <el-divider direction="vertical"></el-divider>
                  <el-button type="text" style="color:red" @click="del(scope.row)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
      <el-dialog :title="title" :visible.sync="dialogVisible" width="400px">
        <div class="dialog_item">
          <span>房型</span>
          <el-select v-model="room_value" size="small" placeholder="请选择房型" @change="Select_room_value"
            style="width:300px">
            <el-option v-for="item in options_rooms" :key="item.id" :label="item.pms_title" :value="item.id">
            </el-option>
          </el-select>
        </div>
        <div class="dialog_item">
          <span>时长</span>
          <el-input-number v-model="hour_num" size="small" style="width:300px;" @change="change_hour" :min="1" :max="6"
            label="描述文字"></el-input-number>
        </div>
        <div class="dialog_item">
          <span>价格</span>
          <el-input prefix-icon="el-icon-my-money" placeholder="请填写价格" size="small" style="width:200px;" v-model="price"
            type="test" onKeypress="return(/^[0-9]*$/.test(String.fromCharCode(event.keyCode)))">
          </el-input>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="hour_room">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>
  
<script>
import { hour_room, GetAllRoomType } from '@/api/hotel'
export default {
  Name: 'HourRoomSetting',
  components: {
  },
  data() {
    return {
      title: '新增钟点房',
      room_value: '',
      select_id: null,//当前操作的id
      select_room_id: null,
      options_rooms: [
      ],
      dialogVisible: false,
      hour_num: '1',
      Array_hour: [

      ],
      price: null,
      tableData: [{
        pms_title: '豪华大床房',
        hour: '4小时',
        price: '￥10',
        state: false,
        total_nav: null,
      },],

    }
  },
  created() {
    this.GetAllRoomType()
    this.getHou_roomLsit()
  },
  methods: {
    // 删除
    async del(value) {
      let data = {
        hotel_id: sessionStorage.getItem('hotel_id'),
        id: value.id
      }

      await hour_room(data, 'DELETE').then(res => {
        console.log(res);
        if (res.data.message == '删除成功') {
          this.$message({
            message: res.data.message,
            type: 'success'
          });
          this.getHou_roomLsit()
        }
      })
    },
    // 点击新增按钮
    addHour_room() {
      this.title = '新增钟点房'
      this.select_id = null
      this.dialogVisible = true
    },
    // 编辑按钮
    openDialog(value) {
      console.log(value);
      this.room_value = value.pms_title
      this.hour_num = value.hour
      this.price = value.price
      this.select_room_id = value.room_id
      this.select_id = value.id
      this.title = '编辑钟点房'
      this.dialogVisible = true
    },
    change_hour(value) {
      console.log(value);
    },
    Select_room_value(value) {
      this.select_room_id = value
      console.log(value);
    },
    // 确定按钮,新增还是编辑
    async hour_room() {
      let method
      console.log(this.title, "this.title");
      if (this.title == '新增钟点房') {
        method = 'POST'
      } else if (this.title == '编辑钟点房') {
        method = 'PUT'
      }
      let data = {
        hotel_id: sessionStorage.getItem('hotel_id'),
        room_id: this.select_room_id,
        hour: this.hour_num,
        price: this.price,
        id: this.select_id
      }
      await hour_room(data, method).then(res => {
        console.log(data, method, res, "==========");
        if (res.data.message == "添加成功") {
          this.$message({
            message: res.data.message,
            type: 'success'
          });
          this.hour_num = '',
            this.price = '',
            this.select_room_id = null
          this.dialogVisible = false
        }
        this.getHou_roomLsit()
      })
    },
    // 获取所有房型
    async GetAllRoomType() {
      let data = {
        hotel_id: sessionStorage.getItem('hotel_id'),
      }
      await GetAllRoomType(data).then(res => {
        this.options_rooms = res.data.data
        console.log(res.data.data);
      })
    },
    //获取所有钟点房
    async getHou_roomLsit() {
      let data = {
        hotel_id: sessionStorage.getItem("hotel_id"),
      }
      await hour_room(data, 'GET').then(res => {
        this.tableData = res.data.data.list
      })
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => { });
    },
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex === 1) {
        return 'warning-row';
      } else if (rowIndex === 3) {
        return 'success-row';
      }
      return '';
    }
  }
}
</script>
  
<style lang="scss" scoped>
::v-deep .el-table th.el-table__cell>.cell {
  font-weight: 400;
}

.content {
  .overflow-auto {
    width: calc(100% - 190px);
    padding: 0 20px;
    height: 100%;
    overflow: hidden;

    .table_body {
      display: flex;
      flex-direction: column;

      .top_btn {
        display: flex;
        flex-direction: row-reverse;
        margin-bottom: 20px;
      }

      .nav {
        display: flex;
        flex-direction: row-reverse;
      }
    }
  }
}


.dialog_item {
  padding-bottom: 20px;

  span {
    margin-right: 20px;
  }
}

::v-deep .el-icon-my-money {
  background: url("../../../../assets/images/￥.png") center center no-repeat;
  background-size: 12px;
}
</style>